import { ref, h, onMounted } from "vue";
import { FormItemComponentType, FormItemData, DynamicFormExpose } from "/@/components/CURDDialog/models";
import { PatternKey } from "/@/utils/verify";
import { useI18n } from "/@/locales/useI18n";
import SelectInput from "/@/components/common/SelectInput.vue";
import { TabItem, WorkOrderItem } from "/@/api/aiot/serviceWorkOrder/models";
import { CustomerItem } from "/@/api/aiot/customerManage/models";
import { getDictionaryByType } from "/@/api/aiot/dictionary";
import { enumToOptions } from "/@/utils/common";
import { WorkType } from "/@/api/aiot/serviceWorkOrder/models";
import { RegionsItem } from "/@/api/aiot/zone/models";
import dayjs, { Dayjs } from "dayjs";

export function useWorkOrderModal(isTransWorkOrder?: boolean) {
  const { t } = useI18n();
  //窗口实例
  const workOrderIns = ref<DynamicFormExpose>();
  const deviceVisible = ref(false);
  const locDgVisible = ref(false);
  const chooseCustomerVisible = ref(false);
  const chooseProjectVisible = ref(false);
  const chooseEquipmentVisible = ref(false);
  // REPAIR:维修;CHECK:检测;MAINTAIN:保养;INSTALL:安装;DEBUG:调试;REFORM:改造}
  const createWorkOrderArr = ref<Array<TabItem>>([
    {
      tabName: t("aiot.serviceWorkOrderInfo.REPAIR"),
      icon: "icon-weixiu",
      unicon: "icon-tijiaogongdan-weixiu-2",
      key: "REPAIR",
      style: { height: "0px" },
    },
    {
      tabName: t("aiot.serviceWorkOrderInfo.CHECK"),
      icon: "icon-jiance",
      unicon: "icon-tijiaogongdan-jiance-2",
      key: "CHECK",
      style: { height: "0px" },
    },
    {
      tabName: t("aiot.serviceWorkOrderInfo.MAINTAIN"),
      icon: "icon-weibao",
      unicon: "icon-tijiaogongdan-weibao-2",
      key: "MAINTAIN",
      style: { height: "0px" },
    },
    {
      tabName: t("aiot.serviceWorkOrderInfo.INSTALL"),
      icon: "icon-anzhuang",
      unicon: "icon-tijiaogongdan-anzhuang-2",
      key: "INSTALL",
      style: { height: "0px" },
    },
    {
      tabName: t("aiot.serviceWorkOrderInfo.DEBUG"),
      icon: "icon-tiaoshi",
      unicon: "icon-tijiaogongdan-tiaoshi-2",
      key: "DEBUG",
      style: { height: "0px" },
    },
    {
      tabName: t("aiot.serviceWorkOrderInfo.REFORM"),
      icon: "icon-gaizao",
      unicon: "icon-tijiaogongdan-gaizao-2",
      key: "REFORM",
      style: { height: "0px" },
    },
  ]);
  const model = ref<WorkOrderItem>({
    projectName: "",
    equipmentName: "",
    equipmentNum: 1,
    faultType: null,
    workOrderType: "REPAIR",
    happenTime: "",
    locations: {
      latitude: "",
      longitude: "",
    },
    descriptions: "",
    faultImages: [],
    customerName: "",
    address: "",
    customerId: "",
    region: "",
    contactsPerson: "",
    contactsPhone: "",
    expectedTime: "",
    projectId: "",
    regionId: "",
  });
  const disabledDate = (current: Dayjs) => {
    return current && current < dayjs().startOf("day");
  };
  const disabledDateBefore = (current: Dayjs) => {
    return current && current > dayjs().endOf("day");
  };
  const modelFormSetting: FormItemData[] = [
    {
      key: "_subTitle",
      beforeKey: "projectName",
      subTitle: t("aiot.serviceApply.repairInfo"),
    },
    {
      label: t("aiot.serviceApply.projectName"),
      required: true,
      key: "projectName",
      props: {
        placeholder: t("common.pleaseSelect"),
        disabled: isTransWorkOrder,
      },
      // type: FormItemComponentType.TEXTAREA,
      customComponent: h(SelectInput, {
        onClick() {
          !isTransWorkOrder ? (chooseProjectVisible.value = true) : null;
        },
      }),
    },
    {
      label: t("aiot.serviceApply.equipmentName"),
      key: "equipmentName",
      max: 256,
      props: {
        placeholder: "请选择(非必选)",
        disabled: isTransWorkOrder,
      },
      // type: FormItemComponentType.TEXTAREA,
      customComponent: h(SelectInput, {
        onClick() {
          !isTransWorkOrder ? (chooseEquipmentVisible.value = true) : null;
        },
      }),
    },
    {
      key: "equipmentNum",
      label: t("aiot.serviceApply.equipmentFaultNumber"),
      props: {
        type: "number",
      },
      // pattern: PatternKey.name,
    },
    {
      key: "workOrderType",
      label: t("aiot.serviceOrder.workType"),
      hide: true,
      type: FormItemComponentType.SELECT,
      props: {
        options: enumToOptions(WorkType, "workType"),
      },
    },
    {
      label: t("aiot.serviceApply.equipmentFaultType"),
      key: "faultType",
      required: true,
      type: FormItemComponentType.SELECT,
      async getData() {
        let data = await getDictionaryByType({ dictionaryType: "FAULT" });
        return data
          ? data.map((el) => ({
              label: el.dictionaryName,
              value: el.dictionaryCode,
            }))
          : [];
      },
      props: {
        options: [],
        placeholder: t("common.pleaseSelect"),
        getPopupContainer(node) {
          console.log(node);
          return node.parentNode;
        },
      },
      // pattern: PatternKey.name,
    },
    {
      key: "happenTime",
      label: t("aiot.serviceApply.happenTime"),
      type: FormItemComponentType.DATEPICKER,
      required: true,
      props: {
        showTime: { format: "HH:mm" },
        format: t("common.dateTimeFormatStr1"),
        valueFormat: t("common.dateTimeFormatStr1"),
        disabledDate: disabledDateBefore,
        style: { width: "100%" },
      },
      // pattern: PatternKey.name,
    },

    {
      key: "descriptions",
      label: t("aiot.serviceApply.description"),
      type: FormItemComponentType.TEXTAREA,
      required: true,
      props: {
        placeholder: t("common.pleaseInput"),
      },
      max: 250,
      // pattern: PatternKey.name,
    },
    {
      key: "faultImages",
      label: t("aiot.serviceApply.faultImagesUrl"),
      type: FormItemComponentType.IMGUPLOAD,
      props: {
        max: 6,
      },
      // pattern: PatternKey.name,
    },
    {
      key: "_subTitle",
      beforeKey: "customerName",
      subTitle: t("aiot.serviceOrder.customerInfo"),
    },

    {
      label: t("aiot.serviceApply.customerName"),
      key: "customerName",
      required: true,
      hide: true,
      props: {
        placeholder: t("common.pleaseSelect"),
      },
      // type: FormItemComponentType.TEXTAREA,
      customComponent: h(SelectInput, {
        onClick() {
          // if (!model.value.customerName) {
          // chooseCustomerVisible.value = true;
          // }
        },
      }),
    },
    {
      label: t("aiot.serviceApply.contactsPerson"),
      key: "contactsPerson",
      required: true,
      props: {
        placeholder: t("common.pleaseInput"),
      },
      max: 32,
    },
    {
      label: t("aiot.serviceApply.contactsPhone"),
      required: true,
      props: {
        placeholder: t("common.pleaseInput"),
      },
      key: "contactsPhone",
      pattern: PatternKey.cellphone,
    },
    {
      key: "region",
      label: t("aiot.customerManage.region"),
      max: 32,
      hide: true,
      // pattern: PatternKey.name,
    },
    {
      label: t("common.detailAddr"),
      key: "address",
      required: true,
      max: 64,
      props: {
        placeholder: t("common.pleaseSelect"),
      },
      // type: FormItemComponentType.TEXTAREA,
      customComponent: h(SelectInput, {
        onClick() {
          locDgVisible.value = true;
        },
      }),
    },
    {
      key: "expectedTime",
      required: true,
      label: t("aiot.serviceApply.expectedTime"),
      type: FormItemComponentType.DATEPICKER,
      props: {
        showTime: { format: "HH:mm" },
        format: t("common.dateTimeFormatStr1"),
        valueFormat: t("common.dateTimeFormatStr1"),
        disabledDate: disabledDate,
        style: { width: "100%" },
      },
      // pattern: PatternKey.name,
    },
    {
      key: "customerId",
      hide: true,
    },
    {
      key: "projectId",
      hide: true,
    },
    {
      key: "equipmentId",
      hide: true,
    },
    {
      key: "locations",
      hide: true,
    },
    {
      key: "regionId",
      hide: true,
    },
  ];
  function chooseLoc(e: RegionsItem) {
    model.value.region = e.adcode;
    model.value.locations = {
      latitude: e.latitude as string,
      longitude: e.longitude as string,
    };
    model.value.address = e.formattedAddress;
  }
  function handleChooseCustomer(row: CustomerItem) {
    let { customerName, customerId, address, region, contactPerson, phone } = row[0];
    model.value.customerName = customerName;
    model.value.customerId = customerId;
    model.value.address = address;
    model.value.region = region;
    model.value.contactsPerson = contactPerson;
    model.value.contactsPhone = phone;
  }
  function handleChooseProject(row: CustomerItem) {
    let { projectName, projectId, customerName, address, contactPerson, contactPhone, location } = row[0];
    if (model.value.projectId !== projectId) {
      model.value.equipmentId = "";
      model.value.equipmentName = "";
    }
    console.info("location==>", location);
    model.value.projectId = projectId;
    model.value.projectName = projectName;
    model.value.contactsPerson = contactPerson;
    model.value.contactsPhone = contactPhone;
    model.value.customerName = customerName;
    model.value.address = address;
    model.value.locations = location;
  }
  function handleChooseEquipement(row: CustomerItem) {
    let { equipmentName, equipmentId } = row[0];
    model.value.equipmentName = equipmentName;
    model.value.equipmentId = equipmentId;
  }

  return {
    chooseLoc,
    workOrderIns,
    handleChooseEquipement,
    handleChooseCustomer,
    handleChooseProject,
    createWorkOrderArr,
    model,
    modelFormSetting,
    deviceVisible,
    locDgVisible,
    chooseCustomerVisible,
    chooseProjectVisible,
    chooseEquipmentVisible,
  };
}
